<template>
  <!-- 朱玉豪 -->
  <div class="history-list" v-if="history">
    <div class="history-list-title">
      <text class="history-list-title-f">{{history[0].date}}开奖</text>
      <div class="history-list-title-num-arr">
        <text class="history-list-title-num-arr-h-one" v-for="(item,index) in history[0].ballArr[0].num" :key="index+1/3">{{formatNum(item)}}</text>
        <text class="history-list-title-num-arr-hr">|</text>
        <text class="history-list-title-num-arr-h-two" v-for="(item,index) in history[0].ballArr[1].num" :key="index+1/4">{{formatNum(item)}}</text>
      </div>
      <div class="history-list-title-num-arrow" v-on:click="historyshow">
            <image class="history-list-title-num-arrow-img" :class="{show:historyShowlist}" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/arrowdown000.png" alt="arrow-down"></image>
         </div>
    </div>
    <div class="list" v-if="historyShowlist">
      <div class="item" v-for="(item,index) in historyWithoutF" :key="index">
        <div class="date_h">{{item.date}}
        </div>
        <div class="balls">
          <text class="h_one" v-for="(num1,index) in item.ballArr[0].num" :key="index+1/5">{{num1}}</text>
          <text style="    visibility: hidden;">|</text>
          <text class="h_two" v-for="(num2,index) in item.ballArr[1].num" :key="index+1/6">{{num2}}</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    history: {
      type: Array,
      required: true
    },
    historyShowlist: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    formatNum(num) {
      if (num < 10) return "0" + num;
      return num.toString();
    },
    historyshow() {
      if (this.historyShowlist === false) {
        this.$emit("sendHistoryShow", true);
      } else {
        this.historyShowlist = false;
        this.$emit("sendHistoryShow", false);
      }
    }
  },
  computed: {
    historyWithoutF: function() {
      return this.history.slice(1);
    }
  }
};
</script>

<style  scoped>
.history-list {
}
.history-list-title-num-arr-hr {
  font-size: 24px;
  margin-left: 6px;
  margin-right: 6px;
}
.history-list-title-num-arr-h-one {
  color: #de000e;
  margin-left: 6px;
  margin-right: 6px;
  font-size: 24px;
}
.history-list-title-num-arr-h-two {
  color: #0c50ee;
  margin: 0 6px;
  font-size: 24px;
  margin-left: 6px;
  margin-right: 6px;
}
.history-list-title {
  flex-direction: row;
  padding-top: 18px;
  padding-bottom: 21px;
  padding-left: 31px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(187, 187, 187);
}
.history-list-title-f {
  font-size: 24px;
  width: 170px;
}
.history-list-title-num-arr {
  display: flex;
  flex-direction: row;
  align-self: center;
}
.arrow {
  flex: 4%;
  text-align: center;
}
.h_one {
  color: #de000e;
  margin: 0 4px;
}
.history-list-title-num-arrow {
  flex-direction: row;
  width: 200px;
  justify-content: flex-end;
}
.history-list-title-num-arrow-img {
  width: 20px;
  height: 20px;
  /* transform: rotate(0deg);
  transition: All 200ms ease-in-out; */
  align-self: center;
}
.show {
  /* transform: rotate(-180deg); */
}
</style>


